<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <!-- 用户名 -->
    <div>用户名：<input type="text" id="ipt" /></div>
    <!-- 性别选择 -->
    <div>
      性别：
      <select name="" id="sel">
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
    </div>
    <!-- 内容展示 -->
    <div>内容：<textarea name="" id="con" cols="30" rows="10"></textarea></div>
    <!-- 存储按钮 -->
    <div>
      <button id="btn">存储</button>
    </div>
    <!-- 数据展示 -->
    <table border="1" cellspacing="0" cellpadding="20">
      <tr>
        <th>用户名</th>
        <th>性别</th>
        <th>内容</th>
      </tr>
      <tr id="inner"></tr>
    </table>
    <script>
      var ipt = document.getElementById("ipt");
      var sel = document.getElementById("sel");
      var con = document.getElementById("con");
      var btn = document.getElementById("btn");
      var inner = document.getElementById("inner");

      //绑定点击事件
      btn.addEventListener("click", function () {
        //对象获取输入元素里面的值
        var obj = {
          user: ipt.value,
          sex: sel.value,
          con: con.value,
        };
        //存储
        // console.log(obj)
        //把obj对象转成字符串
        var objstr = JSON.stringify(obj);
        // console.log(objstr)
        localStorage.setItem("userInfo", objstr);
        getStorage();
      });
      //获取本地存储
      function getStorage() {
        var data = localStorage.getItem("userInfo");
        // console.log(data)
        //把字符串转成JSON对象
        var datas = JSON.parse(data);
        // console.log(datas)
        inner.innerHTML = `
								  <td>${datas.user}</td>
								  <td>${datas.sex == 0 ? "女" : "男"}</td>
								  <td>${datas.con}</td>
								  `;
      }
    </script>
  </body>
</html>
